import {
  Spin,
  DataSet,
} from 'choerodon-ui/pro';
import React, { useMemo, ReactElement } from 'react';
import { Size } from 'choerodon-ui/lib/_util/enum';
import spinDS from './spinDataSet';
import styles from './index.less';


const c7nIcon: ReactElement = (
  <span className={styles['custom-spin-dot']}>
    <i />
    <i />
    <i />
    <i />
  </span>
);

const spinCustomIndicator: React.FC = (): React.ReactElement => {

  const spinDataSet: DataSet = useMemo(() => new DataSet(spinDS()), []);

  return (
    <div>
      <Spin dataSet={spinDataSet} indicator={c7nIcon} size={Size.small} />
      <Spin dataSet={spinDataSet} indicator={c7nIcon} />
      <Spin dataSet={spinDataSet} indicator={c7nIcon} size={Size.large} />
    </div>
  );
};

export default spinCustomIndicator;
